<template>
  <div class="pageWrapper">
    <common-header />
    <div class="wrapper">
      <div class="year-select">
        <span @click="showYearPicker = true" class="label">年份选择：</span>
        <span @click="showYearPicker = true">{{ queryform.year ? queryform.year + "年" : "全部" }}</span>
        <img src="@/assets/common/arrow-down.png" />
      </div>
      <div class="list">
        <PullRefreshList ref="PullRefreshList" :limit="page.size" :page-no.sync="page.current" :data.sync="dataList" @getList="getData">
          <list-item @onDel="onDel(index)" :content="item" v-for="(item, index) in dataList" :key="index" />
        </PullRefreshList>
        <div class="btn-group">
          <div class="btn btn-active" @click="linkAdd">新增年度报告</div>
        </div>
        <div class="btn-block"></div>
      </div>
      <van-popup v-model="showYearPicker" position="bottom">
        <van-picker :default-index="yearIndex" title="选择年份" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showYearPicker = false" />
      </van-popup>
      <van-popup v-model="showYear" position="bottom">
        <van-picker :default-index="selectedYear" title="选择年" show-toolbar value-key="year" :columns="yearColumns" @confirm="onYearConfirm" @cancel="showYear = false" />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getAnnualReportList, getAnnualReportTime, checkYearReport } from "@/api/annualReport";
import listItem from "./components/report-item.vue";
import PullRefreshList from "@/components/PullRefreshList";
export default {
  components: {
    listItem,
    PullRefreshList
  },
  data() {
    return {
      showYearPicker: false,
      startYear: 2020,
      yearIndex: 0,
      columns: [],
      yearColumns: [],
      queryform: {
        current: 1,
        size: 10,
        year: ""
      },
      page: {
        size: 10,
        index: 1
      },
      showYear: false,
      dataList: [],
      selectedYear: "",
      deptId: ""
    };
  },
  created() {
    this.deptId = this.$route.query.deptId;
    let current = new Date();
    let year = current.getFullYear();
    for (let i = this.startYear; i <= year; i++) {
      this.columns.push(i);
    }
    this.columns.push("全部");
    this.yearIndex = this.columns.length - 1;
  },
  methods: {
    onConfirm(val) {
      this.queryform.year = val == "全部" ? "" : val;
      this.showYearPicker = false;
      // this.getData();
      this.$refs.PullRefreshList.onSearch();
    },
    onDel(index) {
      this.dataList.splice(index, 1);
    },
    onYearConfirm(val) {
      checkYearReport(val.year).then(res => {
        if (res.data && res.data.status == "2") {
          this.$router.push({
            path: "/annualReport/detail",
            query: {
              id: res.data.id
            }
          });
        } else {
          let query = {};
          if (res.data) {
            query.id = res.data.id;
          } else {
            query.deptId = this.deptId;
            query.year = val.year;
          }
          this.$router.push({
            path: "/annualReport/add",
            query
          });
        }
      });
    },
    getData(callback) {
      getAnnualReportList(this.queryform).then(res => {
        callback(res.data.records);
      });
    },
    getColumns(type) {
      getAnnualReportTime().then(res => {
        this.yearColumns = res.data.filter(ele => ele.periodFlag != "2");
        this.selectedYear = this.yearColumns.findIndex(ele => ele.periodFlag == "1");
        this.showYear = true;
      });
    },
    linkAdd() {
      if (!this.yearColumns.length) {
        this.getColumns(2);
      } else {
        this.showYear = true;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 20px 16px;
  line-height: 20px;
  color: #333;
  font-size: 14px;
}
.year-select {
  display: flex;
  align-items: center;
  .label {
    color: #999999;
    margin-right: 8px;
  }
  img {
    width: 12px;
    margin-left: 8px;
  }
}
.list {
  margin-top: 12px;
  .btn-group {
    position: fixed;
    bottom: 40px;
    width: 100%;
    left: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    box-sizing: border-box;
    .btn {
      width: 100%;
      line-height: 52px;
      border-radius: 12px;
      background: #2492ff;
      text-align: center;
      font-size: 14px;
    }
  }
  .btn-block {
    height: 92px;
    width: 100%;
  }
}
</style>
